<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>计算器</title>
</head>
<style>
    /** {*/
        /*padding: 0;*/
        /*margin: 0;*/
    /*}*/
    table {
        text-align:center;
        margin:20px auto;
        background:gray;
    }
    input {
        width:50px;
        height:38px;
        border: 2px solid gray;
    }
</style>

<body>
<table width="240" height="242" cellpadding="0" cellspacing="0">
    <tr>
        <td width="62" colspan="4"><input id="text" type="text" style="width: 230px" onclick="f2()"/></td>
    </tr>
    <tr>
        <td><input type="button" value="%" style="font-size: 20px" onclick="f1('%')"/></td>
        <td><input type="button" value="/" style="font-size: 20px" onclick="f1('/')"/></td>
        <td><input type="button" value="*" style="font-size: 20px;padding-top: 10px" onclick="f1('*')"/></td>
        <td><input type="button" value="Del" onclick="clears()"/></td>
    </tr>
    <tr>
        <td><input type="button" value="7" onclick="f1(7)"/></td>
        <td><input type="button" value="8" onclick="f1(8)"/></td>
        <td><input type="button" value="9" onclick="f1(9)"/></td>
        <td><input type="button" value="-" style="font-size: 30px" onclick="f1('-')"/></td>
    </tr>
    <tr>
        <td><input type="button" value="4" onclick="f1(4)"/></td>
        <td><input type="button" value="5" onclick="f1(5)"/></td>
        <td><input type="button" value="6" onclick="f1(6)"/></td>
        <td><input type="button" value="+" style="font-size: 20px" onclick="f1('+')"/></td>
    </tr>
    <tr>
        <td><input type="button" value="1" onclick="f1(1)"/></td>
        <td><input type="button" value="2" onclick="f1(2)"/></td>
        <td><input type="button" value="3" onclick="f1(3)"/></td>
        <td rowspan="2"><input type="button" value="=" style="height: 77px; font-size: 30px" onclick="f2('=')"/></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" value="0" style="width: 110px" onclick="f1(0)"/></td>
        <td><input type="button" value="." onclick="f1('.')" style="font-size: 30px;line-height:10px;padding-bottom: 10px"/></td>
    </tr>
</table>
<script src="commen.js"></script>
<script>
    function f1(x) {
        $("text").value+=x;
        //$("text").value=eval($("text").value);
        return $("text").value;
    };
    function f2() {
        $("text").value=eval($("text").value);
        return $("text").value;
    };
    function clears() {
//        var obj=$("text").value;
//        var arr=obj.split("");
//        var dels= arr.splice(arr.length-2,1,"a");
//        //删除最后一项失败了,这里dels是变量，变量变量，不能等于数组啊啊啊啊
//        console.log(dels);
//        $("text").value=dels;
        //$("text").value="";
        var obj=$("text").value;
        var arr=obj.split("");
        arr.splice(arr.length-1,1,"");
        //这时arr 是一个数组，带着，，，最后需要变成字符串
        $("text").value=arr.join("");
        return $("text").value;
    };
</script>
</body>
</html>
